<template>
	<!-- 门店 -->
	<view class="con">
		<view class="carousel-section">
			<swiper class="carousel" circular @change="swiperChange" :autoplay="true" :indicator-dots="false" height="600rpx"
				indicator-active-color="#cc2827">
				<swiper-item v-for="(item, index) in shop.images" :key="index" class="carousel-item"
					@click="navToLink(item)">
					<image :src="item" mode="aspectFill" />
				</swiper-item>
			</swiper>

			<view class="banner-swiper-dots">
				<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'"
					v-for="(dot, index) in shop.images" :key="index"></text>
			</view>
		</view>
		<view class="head">
			<view class="title">
				<!-- <span style="color: #666;min-width: 42px;">地址：</span> -->
				{{shop.province_name+shop.city_name+shop.area_name+shop.address ? shop.province_name+shop.city_name+shop.area_name+shop.address : ''}}
			</view>
			<view class="" style="display: flex;">
				<view class="" style="color: #0172F9;margin-right: 50rpx;" @click="goNavigation()">
					<image src="../../static/imgs/order/gps.png" mode="widthFix"
						style="width: 36rpx;height: 36rpx; position: relative;margin-left: 3px;top: 0px;"></image>
					<view class="daohang">
						导航
					</view>
				</view>
				<view class="" style="color: #0172F9;padding-right: 30rpx;" @click="call">
					<image src="../../static/imgs/order/call.png" mode="widthFix"
						style="width: 36rpx;height: 36rpx;position: relative;margin-left: 3px;top: 0px;"></image>
					<view class="daohang">
						电话
					</view>
				</view>
			</view>
		</view>
		<view class="juli">
			<image src="../../static/imgs/order/location.png" mode="widthFix"
				style="width: 24rpx;height: 24rpx;position: relative;margin-left: 3px;top: 2px;"></image>
			距离您{{shop.distance_text}}
		</view>
		<view class="content" style="padding: 30rpx;">
			<view class="content_box"><u-parse :html="shop.content"></u-parse></view>
			<!-- <view class="store-msg" v-if="shop.yinye == 1">
				<view class="openhours" style="display: flex;">
					<span style="color: #333333;">门店星级：</span>
					<view class="x-f star-box">
						<text class="cuIcon-favorfill star-active" v-for="s in shop.level_type" :key="s"></text>
						<text class="cuIcon-favorfill" v-for="z in 5 - shop.level_type" :key="z"></text>
					</view>
				</view>
				<view class="openhours" style="display: flex;">
					<span style="color: #333333;">营业时间：</span>{{shop.openhours ? shop.openhours : ''}}
					<uni-tag style="margin-left: 10rpx;" v-if="shop.is_yingye" :text="'营业中'" type="success"
						:inverted="true" :circle="false" :size="'small'">
					</uni-tag>
					<uni-tag style="margin-left: 10rpx;" v-else :text="'结束营业'" type="error" :inverted="true"
						:circle="false" :size="'small'">
					</uni-tag>
				</view>
				<view class="openweeks">
					{{shop.openweeks_str ? shop.openweeks_str : ''}}
				</view>
				<view v-if="shop.json" class="tags">
					<uni-tag style="margin-right: 10rpx;" v-for="val in shop.json.split('，')" :key="val" :text="val"
						type="success" :inverted="true" :circle="false" :size="'small'">
					</uni-tag>
				</view>
			</view> -->
		</view>
		<!-- <view class="connn"></view> -->
		<!-- <view class="ticket">
			{{title}}
			<image src="../../static/imgs/order/guarantee@2x.png" mode="widthFix"
				style="width: 68rpx;position: relative;margin-left: 10rpx;top: 10rpx;margin-right: 20rpx;height: 38rpx;">
			</image>
			<span class="chengnuo">未消费，随时退 · 过期退</span>
		</view>
		<view class="hot-goods mx30 mb10" v-if="shop.shopList.length">
			<view class="goods-list x-f" style="background-color: #fff;">
				<view class="goods-item" v-if="goods.id" v-for="goods in shop.shopList" :key="goods.id">
					<shopro-goods-card :detail="goods" :isTag="true"></shopro-goods-card>
				</view>
			</view>
		</view> -->
	</view>
</template>


<script>
	import {
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				shop: [],
				id: 0,
				swiperCurrent: 0,
				title: '门店产品',
				emptyData: {
					img: '/static/imgs/empty/empty_goods.png',
					tip: '暂无商品信息噢~'
				},
				// listParams: {
				// 	page: 1
				// },
				// lastPage: 1, //分页总数
				// total: 0, //总商品数
				// perPage: 0, //单页商品数
				// isRefresh: false
			};
		},
		onLoad(options) {
			console.log(options?.id)
			this.id = options?.id;
			this.getShop();
		},
		mounted() {

		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
			})
		},
		methods: {
			// 轮播切换
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			goNavigation() {
				//字符串转数字
				let latitude = parseFloat(this.shop.latitude);
				let longitude = parseFloat(this.shop.longitude);
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: this.shop.province_name + this.shop.city_name + this.shop.area_name,
					address: this.shop.address,
					// scale: 18, //缩放比例，范围5~18，默认为18
					success: function() {
						console.log('success');
					}
				});
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.shop.phone
				});
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			getShop() {
				console.log(this.detail)
				let that = this;
				that.$http('goods.detail', {
					type: 'getShop',
					latitude: that.$Route.query.lat ? that.$Route.query.lat : uni.getStorageSync('latitude'),
					longitude: that.$Route.query.lng ? that.$Route.query.lng : uni.getStorageSync('longitude'),
					id: that.$Route.query.id
				}).then(res => {
					if (res.code === 1) {
						console.log(res.data);
						that.shop = res.data;
						that.title = res.msg;
						uni.setNavigationBarTitle({
							title: res.data.name
						})
						that.setShareInfo({
							query: {
								url: 'store-' + that.$Route.query.id + that.shareData.id + '&share_id=' +
									that.userInfo.id
							},
							title: that.shop.name,
							image: that.shop.logo_image
						});
					}
					if (res.code == 0) {
						that.$tools.toast(res.msg);
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page,
	.con {
		background-color: #fff;
	}

	.star-box {
		.cuIcon-favorfill {
			font-size: 24rpx;
			color: #dedede;
		}

		.star-active {
			color: #0170F9;
		}
	}

	.store_btm1 {
		width: 152rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #5D9BFF 0%, #1759E6 100%);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;

		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
	}

	.store_btm2 {
		width: 152rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #FFCC54 0%, #FD852F 100%);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;

		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btm-img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.lv {
		display: inline-block;
		padding: 0 10rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: #CCFFD8;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #37CC37;
	}

	.hong {
		display: inline-block;
		padding: 0 10rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: #FFE8E8;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FF9100;
	}

	.store-img {
		min-width: 200rpx;
		width: 200rpx;
		border-radius: 12rpx;
		height: 200rpx;
		margin-right: 22rpx;
	}

	swiper {
		min-height: 440rpx;
		// min-height: 600rpx;
	}
	
	// swiper-item{
	// 	min-height: 600rpx;
	// }

	.daohang {
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		min-width: 48rpx;
	}

	.juli {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		padding-left: 26rpx;

		image {
			margin-right: 10rpx;
		}
	}

	.con {

		.head {
			display: flex;
			justify-content: space-between;
			// border-radius: 12px 12px 0px 0px;
			background-color: #fff;
			position: relative;
			z-index: 99;
			// margin: 0 2px;
			margin: 0px;
			// margin-top: -8px;
			margin-top: 26rpx;

			.title {
				color: #333;
				// line-height: 40px;
				// display: flex;
				// align-items: center;
				padding-left: 30rpx;
				// font-size: 28rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 20rpx;
			}

		}

		.ticket {
			font-weight: 600;
			color: #333;
			line-height: 46px;
			font-size: 36rpx;
			// margin: 0 10px;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			padding: 0rpx 30rpx 0 30rpx;
		}

		.chengnuo {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.connn {
			width: 100vw;
			height: 24rpx;
			background: #F5F8FA;
		}

		/deep/ .goods-box {
			width: 100%;
			background: #fff;
			padding: 0px 0px;
			box-shadow: unset;
			border: 0;
			border-radius: 13px;
		}

		/deep/ .goods-box .price-box .tag-box {
			width: 128rpx;
			height: 56rpx;
			background: linear-gradient(180deg, #0298FC 0%, #0170F9 100%) !important;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		// 商品列表
		.hot-goods {
			background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
			border-radius: 20rpx;
			margin-top: 0px;

			.goods-list {
				flex-wrap: wrap;
				width: 690rpx;

				.goods-item {
					// margin-right: 20rpx;
					// margin-bottom: 20rpx;
					// width: 345rpx;
					width: 100%;
					margin-bottom: 30rpx;
					// box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
					border-radius: 20rpx;

					&:nth-child(2n) {
						margin-right: 0;
					}
				}
			}

			.refresh-btn {
				margin-left: 50%;
				transform: translateX(-50%);
				width: 156rpx;
				height: 50rpx;
				background: #ffffff;
				border-radius: 25rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
				white-space: nowrap;

				.cuIcon-refresh {
					color: #dbdbdb;
					margin-right: 12rpx;
					font-size: 32rpx;
				}
			}

			.refresh-active {
				transform: rotate(360deg);
				transition: all linear 0.5s;
			}
		}

		.content {
			position: relative;
			z-index: 99;
			// border-radius: 12px 12px 0px 0px;
			background-color: #fff;

			.store-msg {
				// border-top: 1px solid #e5e5e5;
				padding: 20rpx 30rpx 30rpx 30rpx;

				.openhours {
					color: #333333;
					font-size: 14px;
					margin-bottom: 20rpx;
				}

				.openweeks {
					color: #333333;
					font-size: 12px;
				}

				.tags {
					margin-top: 15rpx;
					display: flex;
					flex-direction: row;
				}
			}
		}

		/* 头部 轮播图 */
		.carousel-section {
			position: relative;
			padding-top: 0px;

			.titleNview-background {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				// height: 426upx;
				transition: .4s;
			}
		}

		.carousel {
			width: 100vw;

			.carousel-item {
				width: 100vw;
				overflow: hidden;
			}

			image {
				width: 100vw;
			}
		}

	}

	.banner-swiper-dots {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20rpx;
		z-index: 66;

		.banner-dot {
			width: 14rpx;
			height: 14rpx;
			background: rgba(255, 255, 255, 1);
			opacity: 0.5;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.banner-dot-active {
			width: 14rpx;
			height: 14rpx;
			background: #0176FA;
			// border-radius: 50%;
			margin-right: 10rpx;

			width: 34rpx;
			// height: 10px;
			background: linear-gradient(180deg, #0298FC 0%, #0170F9 100%);
			border-radius: 6rpx;
		}
	}
</style>